﻿@{
    ViewBag.MainMenu = "Portal";
    ViewBag.LeftMenu = "Page";

    ViewBag.Title = "自定义页面";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link rel="stylesheet" type="text/css" href="/Scripts/wangEditor/css/wangEditor.min.css">
<script type="text/javascript" src='/Scripts/wangEditor/js/wangEditor.min.js'></script>

<style>
    .wangEditor-container .wangEditor-txt p,
    .wangEditor-container .wangEditor-txt h1,
    .wangEditor-container .wangEditor-txt h2,
    .wangEditor-container .wangEditor-txt h3,
    .wangEditor-container .wangEditor-txt h4,
    .wangEditor-container .wangEditor-txt h5 {
        margin: 0px 0;
        line-height: 1.8;
    }
</style>

<script type="text/javascript">

    var _id = getQueryString("id");
    var _mode = "create";//modify
    var _validator;
    var _data = null;

    var _editor;


    $(document).ready(function () {

        $("#spanUrlId").html(_id);

        //_editor = $('#txtBody').wangEditor({
        //    'menuConfig': [
        //     ['viewSourceCode'],
        //        ['bold', 'underline', 'italic', 'foreColor', 'backgroundColor', 'strikethrough'],
        //        ['blockquote', 'fontFamily', 'fontSize', 'setHead', 'list', 'justify'],
        //        ['createLink', 'unLink', 'insertTable'],
        //        ['insertLocation'],
        //        ['undo', 'redo', 'fullScreen']
        //    ]
        //});
        _editor = new wangEditor('divBodyEditor');
        _editor.config.menus = [
        'source',
        '|', 'bold', 'underline', 'italic', 'strikethrough', 'eraser', 'forecolor', 'bgcolor',
        '|','quote','fontfamily','fontsize','head','unorderlist','orderlist','alignleft','aligncenter','alignright',
        '|','link','unlink','table',
        '|','undo','redo','fullscreen'
        ];
        _editor.create();

        _validator = $("#form").validate({
            onfocusout: false,
            onkeyup: false,
            showErrors: showValidationErrors,
            rules: {
                "txtTitle": "required",
                "txtShareImageUrl": "required",
                "txtShareTimelineTitle": "required",
                "txtShareAppMessageTitle": "required",
                "txtShareAppMessageDescription": "required",
                "txtShareTimelinePoint": {
                    required: true,
                    number: true,
                    digits: true,
                    range: [0, 1000]
                },
                "txtShareAppMessagePoint": {
                    required: true,
                    number: true,
                    digits: true,
                    range: [0, 1000]
                }
            },
            messages: {
                "txtTitle": "请输入标题；",
                "txtShareImageUrl": "请选择分享小图片；",
                "txtShareTimelineTitle": "请输入分享到朋友圈标题；",
                "txtShareAppMessageTitle": "请输入分享给好友标题；",
                "txtShareAppMessageDescription": "请输入分享给好友描述；",
                "txtShareTimelinePoint": {
                    required: "请输入分享朋友圈奖励积分；",
                    number: "分享朋友圈奖励积分请输入有效整数字；",
                    digits: "分享朋友圈奖励积分请输入有效整数字；",
                    range: "分享朋友圈奖励积分值请介于 0 到 1000 之间；"
                },
                "txtShareAppMessagePoint": {
                    required: "请输入分享好友奖励积分；",
                    number: "分享好友奖励积分请输入有效整数字；",
                    digits: "分享好友奖励积分请输入有效整数字；",
                    range: "分享好友奖励积分值请介于 0 到 1000 之间；"
                }
            }
        });

        $("[keyenter]").keypress(function (e) {
            if (e.keyCode == 13) {
                save();
            }
        });

        $("#txtShareImageUrl").blur(function () {
            loadShareImage();
        });

        load();
    });

    function load() {
        if (_id == undefined || _id == "") {

            _id = "@System.Guid.NewGuid().ToString()";
            $("#spanUrlId").html(_id);

            return;
        }

        _mode = "modify";
        $("#btnRemove").show();

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Page/GetPage?id=" + _id,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    _data = data.Data;
                    $("#txtTitle").val(_data.Title);
                    _editor.$txt.html(_data.Body)
                    //$("#selectTopBar").find("option[value='" + _data.TopBar + "']").attr("selected", true);
                    $("#txtShareTimelinePoint").val(_data.ShareTimelinePoint);
                    $("#txtShareAppMessagePoint").val(_data.ShareAppMessagePoint);
                    $("#txtShareImageUrl").val(_data.ShareImageUrl);
                    $("#txtShareTimelineTitle").val(_data.ShareTimelineTitle);
                    $("#txtShareAppMessageTitle").val(_data.ShareAppMessageTitle);
                    $("#txtShareAppMessageDescription").val(_data.ShareAppMessageDescription);
                    loadShareImage();

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function save() {

        if (_validator.form() == false) {
            return;
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        if (_data == null) {
            _data = new Object();
            _data.Id = _id;
        }

        _data.Title = $("#txtTitle").val();
        _data.Body = _editor.$txt.html();
        //_data.TopBar = $("#selectTopBar").val();
        _data.ShareTimelinePoint = $("#txtShareTimelinePoint").val();
        _data.ShareAppMessagePoint = $("#txtShareAppMessagePoint").val();
        _data.ShareImageUrl = $("#txtShareImageUrl").val();
        _data.ShareTimelineTitle = $("#txtShareTimelineTitle").val();
        _data.ShareAppMessageTitle = $("#txtShareAppMessageTitle").val();
        _data.ShareAppMessageDescription = $("#txtShareAppMessageDescription").val();

        var url = "/Api/Page/CreatePage";
        if (_mode == "modify") {
            url = "/Api/Page/UpdatePage";
        }

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: JSON.stringify(_data),
            success: function (data, status, jqXHR) {

                if (data.Success) {

                    if (_mode == "create") {
                        window.location.href = "/Portal/Page";
                        return;
                    }

                    layer.close(loadLayerIndex);
                    layerAlert("保存成功。");

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function removeData() {
        var id = _data.Id;
        if (id == undefined || id == "") {
            return;
        }

        var msg = "是否确认删除？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Page/RemovePage?id=" + id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR) {
                    if (data.Success) {
                        //var index = parent.layer.getFrameIndex(window.name);
                        //parent.loadDataOnPageAndCloseLayer(index);
                        parent.window.location.href = "/Portal/Page";

                    } else {
                        layer.closeAll();
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.closeAll();
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function uploadShareImage() {
        __showFileUpload(getUploadShareImageResult);
    }

    function getUploadShareImageResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        $("#txtShareImageUrl").val(url);
        loadShareImage();
    }

    function loadShareImage() {
        $("#shareImage").attr("src", $("#txtShareImageUrl").val());
    }

    function removeShareImage() {
        $("#txtShareImageUrl").val("");
        loadShareImage();
    }

    function uploadFile() {
        __showFileUpload(getUploadFileResult);
    }

    function getUploadFileResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        _editor.$txt.append("<img src='" + url + "' style='max-width:100%'/>");
    }

</script>

<div style=" margin-top:25px; margin-left:10px;" class="font_black_24">
    自定义页面
</div>

<div class="divDotLine" style="margin-top:15px;"></div>

<div style="margin-top:15px;">
    您可以在 菜单设置 中，添加 转到网址 菜单，指向此URL，或在您的其它页面中引用此URL：
</div>
<div style="margin-top:5px;">
    <div class="divBorder_lightgray" style="padding:10px;font-size:13px;">
        @(ViewBag.PageUrl)?id=<span id="spanUrlId"></span>
    </div>
</div>

<div style="margin-top:25px;">
    <form id="form">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="160" height="36">标题：</td>
                <td><input id="txtTitle" name="txtTitle" type="text" class="input_16" style="width:96%; " maxlength="100" /></td>
            </tr>
            <tr>
                <td height="36" valign="top">Body：</td>
                <td>
                    <div style="width:96%" >
                        <div id="divBodyEditor" style='height:400px; '></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td height="36" valign="top">&nbsp;</td>
                <td>
                    <div style="width:96%; ">
                        <div class="font_gray_13" style="float:left">
                            只需 body 中的内容即可，请勿包含 &lt;body&gt; 和 &lt;/body&gt; 标签。
                        </div>
                        <div style="float:right;">
                            <input name="btnUpload" type="button" class="btn_white" id="btnUpload" value="上传图片" onclick="uploadFile()" />
                        </div>
                        <div style="clear:both"></div>
                    </div>
                </td>
            </tr>
            @*<tr>
                <td height="36">显示顶部导航：</td>
                <td>
                    <select id="selectTopBar" name="selectTopBar" class="input_16" style="width: 130px;">
                        <option value="true">是</option>
                        <option value="false" selected>否</option>
                    </select>
                </td>
            </tr>*@
            <tr>
                <td height="36">分享朋友圈奖励积分：</td>
                <td>
                    <input id="txtShareTimelinePoint" name="txtShareTimelinePoint" type="text" class="input_16" style="width: 130px;" value="0" />
                </td>
            </tr>
            <tr>
                <td height="36">分享好友奖励积分：</td>
                <td>
                    <input id="txtShareAppMessagePoint" name="txtShareAppMessagePoint" type="text" class="input_16" style="width: 130px;" value="0" />
                </td>
            </tr>
            <tr>
                <td height="110" valign="top">

                    <div style="margin-top: 5px;">
                        分享小图片：
                    </div>
                </td>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="110">
                                <img id="shareImage" src="" alt="" width="100" height="100" />
                            </td>
                            <td>
                                <a href="javascript:void(0)" onclick="uploadShareImage()">上传新图片</a><br />
                                <a href="javascript:void(0)" onclick="removeShareImage()">删除图片</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="36">&nbsp;</td>
                <td>
                    <input id="txtShareImageUrl" name="txtShareImageUrl" type="text" class="input_16" style="width: 96%;" maxlength="500" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td valign="top">
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        在微信中分享活动时，使用的正方形小图片。
                    </div>
                </td>
            </tr>
            <tr>
                <td height="36">分享到朋友圈标题：</td>
                <td>
                    <input id="txtShareTimelineTitle" name="txtShareTimelineTitle" type="text" class="input_16" style="width: 96%;" maxlength="50" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        将活动页面分享到朋友圈时显示的标题文字。
                    </div>
                </td>
            </tr>
            <tr>
                <td height="36">分享给好友标题：</td>
                <td>
                    <input id="txtShareAppMessageTitle" name="txtShareAppMessageTitle" type="text" class="input_16" style="width: 96%;" maxlength="50" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        将活动页面分享给好友时显示的标题文字。
                    </div>
                </td>
            </tr>
            <tr>
                <td height="36">分享给好友描述：</td>
                <td>
                    <input id="txtShareAppMessageDescription" name="txtShareAppMessageDescription" type="text" class="input_16" style="width: 96%;" maxlength="100" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="font_gray_13" style="width: 96%; margin-bottom: 10px;">
                        将活动页面分享给好友时显示的标题下方的一段描述文字。
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>

<div style="margin-top:25px;">
    <div style="float:left">
        <input name="btnSave" type="button" class="btn_blue" id="btnSave" value="保 存" onclick="save()" />
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取 消" onclick="goUrl('@Url.Action("Page")')" />
    </div>

    <div style="float:right;">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" style="display:none" onclick="removeData()" />
    </div>
    <div style="clear:both">
    </div>
</div>

@Helpers.FileUpload()
